<template>
  <!-- 抄电表 -->
  <view>
    <!-- 视图 -->
    <view class="page" v-if="!showSelect">
      <view class="sbbh">
        <view class="sbbh-l"> 设备编号</view>
        <view class="sbbh-r">
          <view class="inp" @tap="showSelctFn()">请点击选择</view>
          <view class="scan" @click="scanCode()">
            <u-icon name="scan" color="#44D94B" size="36"></u-icon>
            <text>扫一扫</text>
          </view>
        </view>
      </view>

      <view v-if="elInfor" class="xb-card" style="margin-top: 20rpx" @click="addForm ? '' : showSelctFn()">
        <view>
          <text>编码</text>
          <text>{{ elInfor.elevatorCode }}</text>
        </view>
        <view>
          <text>单位编号</text>
          <text>{{ elInfor.dwCode }}</text>
        </view>
        <view>
          <text>类型</text>
          <text>{{ elInfor.elevatorName }}</text>
        </view>
        <view>
          <text>位置</text>
          <text>{{ elInfor.buildingName }}</text>
        </view>
      </view>

      <template v-if="elInfor">
        <view class="xb-info">
          <view class="col">
            <text>维修项目</text>
            <input type="text" v-model="addForm.moduleType"  placeholder-class="inputClass" disabled/>
          </view>
          <view class="col">
            <text>维修日期</text>
            <text @click="showDateNextCheck=true">{{ addForm.repairTime||'请点击选择日期' }}</text>
          </view>
          <view class="col">
            <text>检查人</text>
            <input type="text" v-model="addForm.repairMan" placeholder="请输入检查人" placeholder-class="inputClass" />
          </view>
          <view class="col">
            <text>单位</text>
            <input type="text" v-model="addForm.unit" placeholder="请输入单位" placeholder-class="inputClass" />
          </view>
          <view class="col">
            <text>数量</text>
            <input type="text" v-model="addForm.quantity" placeholder="请输入数量" placeholder-class="inputClass" />
          </view>
        </view>

        <view class="xb-info">
          <view class="col">
            <text>人工费用</text>
            <input type="text" v-model="addForm.phoneFee" placeholder="请输入人工费用" placeholder-class="inputClass" />
          </view>
          <view class="col">
            <text>材料费用</text>
            <input type="text" v-model="addForm.materialFee" placeholder="请输入材料费用" placeholder-class="inputClass" />
          </view>
          <view class="col">
            <text>合计金额</text>
            <input type="text" v-model="addForm.totalFee||0" placeholder="请输入合计金额" placeholder-class="inputClass" disabled/>
          </view>
        </view>

        <view class="xb-info">
          <view class="flex-col" style="flex-direction: column;justify-content: flex-start;">
            <text style="text-align: left;justify-content: flex-start;width: 100%;">备注</text>
            <textarea auto-height maxlength="200" v-model="addForm.remark" placeholder="请输入最多200个字符…"
                      placeholder-class="inputClass"></textarea>
          </view>
        </view>
      </template>

      <view class="xb-bottom-btn" hover-class="button-hover" v-if="elInfor" @click="submitFn">
        提交
      </view>
    </view>

    <!-- 选择设备编号s -->
    <view class="bh-select" v-show="showSelect">
      <view class="bh-select-t">
        <view class="search-box">
          <view class="search">
            <u-icon name="search" color="#999999"></u-icon>
            <input type="text" :value="searchVal" placeholder="搜索" style="padding-left: 16rpx"
                   @input="searchFn"/>
          </view>
          <text @click="closeSelctFn()">取消</text>
        </view>
      </view>
      <view class="scroll-box">
        <mescroll-body class="select_scroll" ref="mescrollRef" @init="mescrollInit" :down="downOption"
                       @down="downCallback" @up="upCallback">
          <view class="select_list_col" v-for="(item,index) in dataList" :key="index" @click="itemCheck(item)">
            <view class="select_list_col_l">
              <view class="select_list_col_l_l"></view>
              <view class="select_list_col_l_r">
                <view>
                  {{ item.elevatorCode }}
                </view>
                <view class="b-l">
                  <text v-if="item.buildingName">{{ item.buildingName }}</text>
                  <text v-if="item.elevatorSpecifications">{{ item.factory }}</text>
                </view>
              </view>
            </view>
            <view class="select_list_col_r">
              {{ item.elevatorName }}
            </view>
          </view>
        </mescroll-body>
      </view>

    </view>
    <!-- 选择设备编号e -->

    <postSuccess v-if="showSuccess">
      <view slot="txt" class="suc-btnbox">
        <!--<view @click="navToDetails">查看提交信息</view>-->
        <view @click="chaoAway">继续维修</view>
      </view>
    </postSuccess>

    <u-calendar v-model="showDateNextCheck" mode="date" @change="nextCheckDateChange"></u-calendar>
  </view>
</template>
<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

export default {
  mixins: [MescrollMixin], // 使用mixin
  name: "navbar",
  data() {
    return {
      showDateCheck:false,
      showDateNextCheck:false,
      searchVal: "",
      showSuccess: false,
      statusBarHeight: 20,
      showSel: true,
      /* 状态栏高度 */
      /* 导航栏高度 */
      windowWidth: 375,
      meterType: "",
      meterTypeNum: "",
      /* 窗口宽度 */
      /* 设定状态栏默认高度 */
      val: "",
      /* 导航栏搜索框的值 */

      checkNum: 0,
      showSelect: false,
      info: {},
      factory: "",
      tabIndex: "总表",
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
      dataList: [],
      mescollb: null,
      nowValue: "", //当前读数
      placeList: [],
      elInfor: null,
      searchTimout: null,
      searchValue: "",
      addForm: {
        "deviceid": "",
        "repairTime": "",
        "content": null,
        "money": null,
        "repairMan": "",
        "moduleType": "电梯",
        "field1": null,
        "deviceNum": "",
        "deviceName": "",
        "dwCode": "",
        "station": "",
        "repairItem": "",
        "standards": "",
        "unit": "",
        "quantity": "",
        "phoneFee": "",
        "materialFee": "",
        "totalFee": ""
      }
    };
  },
  watch:{
    "addForm.phoneFee":{
      handler (newv,oldv){
        newv=newv||0
        this.addForm.totalFee=parseFloat(newv) +parseFloat(this.addForm.materialFee)
        console.log("newv",newv)
      }

    },
    "addForm.materialFee":{
      handler(newv,oldv){
        newv=newv||0
        this.addForm.totalFee=parseFloat(newv) +parseFloat(this.addForm.phoneFee)
      }
    }

  },
  onLoad(option) {
  },
  methods: {
    checkTap() {
      this.setData({
        checked: !this.data.checked,
      });
    },
    scanCode() {
      uni.scanCode({
        success: (res) => {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
          this.apis.securityApi
              .afElevatorList({
                elevatorCode: res.result,
              })
              .then((res) => {
                let info = res.rows[0];
                this.elInfor = info;
                this.addForm.deviceNum = info.elevatorCode;
                this.addForm.deviceId=info.info.id
                this.addForm.deviceType=info.elevatorName
                this.addForm.station=info.buildingName
                this.dataList = [];
                this.showSelect = false;
              });
        },
      });
    },
    nextCheckDateChange(e){
      this.addForm.repairTime = e.result
    },
    searchFn(e) {
      this.dataList = [];
      this.searchVal = e.detail.value;
      clearTimeout(this.searchTimout);
      this.searchTimout = setTimeout(() => {
        this.mescroll.resetUpScroll();
      }, 1000);
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.dataList = []
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.apis.securityApi
          .afElevatorList({
            pageNum: page.num,
            pageSize: page.size,
            elevatorCode: this.searchVal
          })
          .then((res) => {
            this.dataList = this.dataList.concat(res.rows);
            this.mescroll.endBySize(res.rows.length, res.total);
          })
          .catch(() => {
            //联网失败的回调,隐藏下拉刷新的状态
            this.mescroll.endErr();
          });
    },
    itemCheck(item) {
      let info= this.elInfor = item;
      this.addForm.deviceNum = info.elevatorCode;
      this.addForm.deviceId=info.id
      this.addForm.deviceType=info.elevatorName
      this.addForm.station=info.buildingName
      this.dataList = [];
      this.showSelect = false;
    },
    showSelctFn() {
      this.dataList = [];
      this.showSelect = true;
      this.mescroll.resetUpScroll();
    },
    closeSelctFn() {
      this.dataList = [];
      this.showSelect = false;
    },
    submitFn() {
      if (this.isEmpty(this.addForm.repairMan) ){
        this.showToast('请输入检查人')
        return false
      }
      if (this.isEmpty(this.addForm.repairTime) ){
        this.showToast('请选择维修日期')
        return false
      }
      this.addForm.moudleType="电梯"
      // this.addForm.checkDate=this.$u.timeFormat(Date.now(),'yyyy-mm-dd')
      this.apis.securityApi.deviceMaintain(this.addForm).then((res) => {
        if (res.code == 200) {
          this.showSuccess = true;
        }
      });
    },
    touchChange(e){
      this.addForm.result=e.detail.value
    },
    //继续抄表
    chaoAway() {
      this.addForm = {
        "deviceid": "",
        "repairTime": "",
        "content": null,
        "money": null,
        "repairMan": "",
        "moduleType": "电梯",
        "field1": null,
        "deviceNum": "",
        "deviceName": "",
        "dwCode": "",
        "station": "",
        "repairItem": "",
        "standards": "",
        "unit": "",
        "quantity": "",
        "phoneFee": "",
        "materialFee": "",
        "totalFee": ""
      }
      this.elInfor = null;
      this.showSuccess = false;
    }
  },
};
</script>

<style lang="scss" scoped>
// @import '../../common/css/icons.css';
// @import './../../uni.less';

.page {
  padding-bottom: 112rpx;
  font-size: 28rpx;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #666666;
}

.sbbh {
  margin-bottom: 20rpx;
  box-sizing: border-box;
  padding: 30rpx 32rpx;
  width: 100%;
  background: #ffffff;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .sbbh-l {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
  }

  .sbbh-r {
    display: flex;

    .inp {
      margin-right: 8 upx;
      font-size: 28 upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 1rpx;
        background: #eeeeee;
      }
    }

    .scan {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #44d94b;

      u-icon {
        display: flex;
        align-items: center;
      }

      text {
        margin-left: 12rpx;
      }
    }
  }
}

.xb-card {
  padding: 0 32rpx;
  margin-bottom: 20rpx;

  view {
    padding-top: 28rpx;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:last-child {
      border: none;
    }
  }

  text:nth-child(2) {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #333333;
  }
}

.bh-select {
  .wicon {
    padding-top: 2rpx;
    height: 100%;
    margin-left: 12rpx;
    @include flexCenter;
  }

  .select_list_col {
    box-sizing: border-box;
    padding: 0 52rpx 0 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 148rpx;
    background-color: #fff;
    border-radius: 12rpx;
    border-bottom: 1rpx solid #eeeeee;

    &:last-child {
      border: none;
    }

    .b-l {
      text {
        margin-right: 20 upx;
      }
    }

    .select_list_col_l {
      display: flex;
      align-items: center;

      .select_list_col_l_l {
        margin-right: 24rpx;
        width: 42rpx;
        height: 42rpx;
        border-radius: 50%;
        border: 1rpx solid #cecece;
      }

      .select_list_col_l_r {
        view:nth-child(1) {
          font-size: 28rpx;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
        }

        view:nth-child(2) {
          margin-top: 6rpx;
          font-size: 24rpx;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: #666666;
          line-height: 34rpx;
        }
      }
    }

    .select_list_col_r {
      flex-shrink: 0;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }

  .bh-select-t {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .search-box {
      box-sizing: border-box;
      padding: 20rpx;
      top: 0;
      left: 0;
      width: 100vw;
      background-color: #fff;
      display: flex;
      align-items: center;

      .search {
        border-radius: 12rpx;
        flex-grow: 1;
        height: 70rpx;
        display: flex;
        padding: 0 20rpx;
        align-items: center;
        background: #f5f5f5;
      }

      text {
        display: inline-flex;
        font-size: 24rpx;
        margin-left: 16rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }
    }

    .select_t {
      padding: 22rpx 40rpx;
      width: 100vw;
      background: #ffffff;
      display: flex;
      border-bottom: 1rpx solid #eeeeee;

      .select_col {
        box-sizing: border-box;
        min-width: 152rpx;
        margin-right: 20rpx;
        height: 46rpx;
        background: #f2f2f2;
        border-radius: 24rpx;
        font-size: 24rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        @include flexCenter;
      }

      .select_t_ac {
        background: rgba(68, 217, 75, 0.1);
        border: 1rpx solid #44d94b;
        color: #44d94b;
      }
    }
  }
}

.suc-btnbox {
  margin-top: 60rpx;
  display: flex;

  view {
    @include flexCenter;
  }

  view:nth-child(1) {
    width: 220rpx;
    height: 80rpx;
    background: #f8f8f8;
    border-radius: 2rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7b7b7b;
    border: 1rpx solid #dcdcdc;
  }

  view:nth-child(2) {
    margin-left: 40rpx;
    width: 220rpx;
    height: 80rpx;
    background: #f8f8f8;
    border-radius: 2rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #44d94b;
    border: 1rpx solid #44d94b;
  }
}

.scroll-box {
  /* #ifdef H5 */
  padding-top: 40rpx;
  /* #endif */
}

.maType {
  border-radius: 12rpx;
  width: 100%;
  padding: 20rpx 36rpx;
  background: #fff;
  margin-bottom: 20rpx;
}
</style>
